<template>
  <div class="session-wrap">
  <!--    <el-dialog
      title="占位单图"
      :visible.sync="MoreMapDialogVisible"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"> -->
      <div style="text-align: left; width: 400px;">
        <el-upload
          :action="imgUpload"
          :file-list="fileList"
          list-type="picture"
          :on-preview="handlePictureCardPreview"
          :on-success="singlSuccess"
          :on-remove="handleRemove">
          <!-- <i class="el-icon-plus"></i> -->
           <el-button size="small" type="primary">点击上传</el-button>
           <!-- <el-input  size="mini" style="width:600px;"> -->
        </el-upload>

        <el-form>
          <el-form-item
            :label="'第'+ (Number(index)+1) +'个图片的链接与有效期：'"
            v-for="(item,index) in fileList"
            :key="index"
            class="mt20"
          >
            <el-input v-model="item.backUrl" placeholder="请输入链接地址" width="60%"></el-input>
            <br>
            <el-date-picker
              v-model="item.vaildDate"
              type="datetimerange"
              range-separator="至"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <!-- <el-button type="danger"  @click="deleteImg(index)">删除</el-button> -->
          </el-form-item>
      </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="close()" size="mini">取消</el-button>
          <el-button type="primary" @click="saveSinglEMapConf" size="mini">确定</el-button>
        </div>
      </div>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
  // 引入资源
  export default {
    name: 'session',
    props: {
      moduleId: {
        type: String
      },
      singlList: {
        type: Array,
        default: []
      },
      MoreMapDialogVisible:{
        type:Boolean
      }

    },
    data() {
      return {
        fileList:[],
        imgUpload: this.utils.imgUploadUrl,          // 上传图片地址
        dialogVisible: false,                                         // 是否显示查看图片
        vaildDate:"",// 图片有效期
        startDate:"",// 有效期开始时间
        endDate:"",// 有效期结束时间
      }
    },

    methods: {

      // 上传图片保存信息
      saveSinglEMapConf(){
        let this_ = this;
        let imgUlrList = this_.fileList;
        imgUlrList.forEach(item=>{
          item.imgUrl = item.url;
          if(item.vaildDate && item.vaildDate.length > 0){
            item.startDate = new Date(item.vaildDate[0]);
            item.endDate = new Date(item.vaildDate[1]);
          }
        });
        this_.utils.request.cmsPageModuleAddModuleData({templateDataType:0,moduleId:this_.moduleId,variablesObject:imgUlrList,platform:1},res=>{
          if(res.code === "0000"){
            // this.MoreMapDialogVisible=false
//            this_.singlList = [];
            // this_.$emit('MoreMapDialogVisibleFun');
            this_.$emit('getIndex');//从父页面发射指令给子页面;
            this_.$message({"message":"保存成功",type:"success"});
          }else{
            this_.$message({"message":res.msg,type:"error"});
          }
        })
      },

      // 图片回显  handlePictureCardPreview
       handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },


      // 删除已上传的图片  handleRemove
      handleRemove(file, fileList) {
        if(fileList && fileList.length>0){
          this.singlList = fileList;
        }else{
          this.singlList=[];
        }
        this.$emit('getIndex');//从父页面发射指令给子页面;
      },
        


      // 上传成功后回调
      singlSuccess(file){
        this.singlList.push({url:file.data.imgUrl,backUrl:''})
        // this.$emit('getIndex');//从父页面发射指令给子页面;
      },
      close(){
        // this.MoreMapDialogVisible=false
        this.$router.push("/Pages/Configuration/Cms/CmsPages");
      }

    },

    mounted() {
      this.fileList=this.singlList;

    },
  }
</script>
<style lang="scss" scoped>
  .dialog-footer{
    margin-top: 20px
  }
  .session-wrap {
    width: 100%;
    height: auto;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 10px;
    .session-image-wrap {
      width: 100%;
      height: 125px;
      margin-bottom: 10px;
      .session-image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
